<template>
  <div class="gallery">
    <div v-for="item in items" :key="item.id" class="card">
      <img :src="item.url" @click="open(item)" alt="Channel Image" />
      <div class="label">#{{ item.label }}#</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const items = ref([
  {
    label: "创意",
    url: "https://codelover.club/coursefiles/images/film/创意.jpeg",
    id: 1,
  },
  {
    label: "励志",
    url: "https://codelover.club/coursefiles/images/film/励志.jpeg",
    id: 2,
  },
  {
    label: "搞笑",
    url: "https://codelover.club/coursefiles/images/film/搞笑.jpeg",
    id: 3,
  },
  {
    label: "运动",
    url: "https://codelover.club/coursefiles/images/film/运动.jpeg",
    id: 4,
  },
  {
    label: "旅行",
    url: "https://codelover.club/coursefiles/images/film/旅行.jpeg",
    id: 5,
  },
  {
    label: "爱情",
    url: "https://codelover.club/coursefiles/images/film/爱情.jpeg",
    id: 6,
  },
  {
    label: "广告",
    url: "https://codelover.club/coursefiles/images/film/广告.jpeg",
    id: 7,
  },
  {
    label: "动画",
    url: "https://codelover.club/coursefiles/images/film/动画.jpeg",
    id: 8,
  },
  {
    label: "剧情",
    url: "https://codelover.club/coursefiles/images/film/剧情.jpeg",
    id: 9,
  },
  {
    label: "音乐",
    url: "https://codelover.club/coursefiles/images/film/音乐.jpeg",
    id: 10,
  },
  {
    label: "科幻",
    url: "https://codelover.club/coursefiles/images/film/科幻.jpeg",
    id: 11,
  },
  {
    label: "纪录",
    url: "https://codelover.club/coursefiles/images/film/纪录.jpeg",
    id: 12,
  },
  {
    label: "预告",
    url: "https://codelover.club/coursefiles/images/film/预告.jpeg",
    id: 13,
  },
  {
    label: "混剪",
    url: "https://codelover.club/coursefiles/images/film/混剪.jpeg",
    id: 14,
  },
  {
    label: "实验",
    url: "https://codelover.club/coursefiles/images/film/实验.jpeg",
    id: 15,
  },
  {
    label: "生活",
    url: "https://codelover.club/coursefiles/images/film/生活.jpeg",
    id: 16,
  },
  {
    label: "时尚",
    url: "https://codelover.club/coursefiles/images/film/时尚.jpeg",
    id: 17,
  },
  {
    label: "汽车",
    url: "https://codelover.club/coursefiles/images/film/汽车.jpeg",
    id: 18,
  },
  {
    label: "游戏",
    url: "https://codelover.club/coursefiles/images/film/游戏.jpeg",
    id: 19,
  },
  {
    label: "美食",
    url: "https://codelover.club/coursefiles/images/film/美食.jpeg",
    id: 20,
  },
]);

const open = (item) => {
  console.log("打开指定的频道列", item);
  this.$router.push({
    path: "/homepage",
    query: {
      items_id: item.id,
      items_name: item.label,
    },
  });
};
</script>

<style scoped>
.gallery {
  width: 100%;
  position: relative;
  height: 0;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.card {
  margin: 0px;
  height: 250px;
  width: 250px;
}

.card img {
  width: 100%;
  height: 100%;
}

.label {
  position: absolute;
  transform: translate(110%, -360%);
  color: white;
  font-size: 25px;
  /* 用于在图片上增加文字的可读性 */
  text-shadow: 2px 2px 4px rgba(1, 0.5, 0.5);
}
</style>
